<!--  -->
<template>
  <div class="index container">
    <el-table
      v-loading="loading"
      ref="refTable"
      :data="eqTableData"
      :max-height="hight"
      :row-key="getRowKeys"
      :expand-row-keys="expands"
      @expand-change="exChange"
    >
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table ref="tableChild" :data="dataList" align="center">
            <el-table-column align="center" label="时间" prop="recordDate"/>
            <el-table-column label="参数" prop="param" min-width="50%"/>
            <el-table-column label="异常原因" prop="reason" min-width="50%"/>
            <el-table-column align="center" label="预计读数" prop="predictData" min-width="50%"/>
            <el-table-column align="center" label="实际读数" prop="actualData" min-width="50%"/>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleIgnore(scope.$index, scope.row)">忽略</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleCorrect(scope.$index, scope.row)"
                >修正</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="设备ID" prop="eqId"/>
      <el-table-column label="所在大厦" prop="blName"/>
      <el-table-column label="所在楼层" prop="flName"/>
    </el-table>
  </div>
</template>


<script>
export default {
  data() {
    return {
      expands: [], //只展开一行放入当前行id
      getRowKeys: row => {
        //获取当前行id
        return row.eqId; //这里看这一行中需要根据哪个属性值是id
      },
      eqTableData: [{},{}],
      dataList: []
    };
  },
  methods: {
    exChange(row, rowList) {
      // console.log(row)
      // this.loading = true;

      var that = this;
      if (rowList.length) {
        // 只展开一行//说明展开了
        that.expands = [];
        if (row) {
          that.expands.push(row.eqId); // 只展开当前行id
        }
      } else {
        // 说明收起了
        that.expands = [];
      }
    }
  }
};
</script>
<style scoped lang="scss">
.topBox {
  padding: 10px 0;
  width: calc(100% - 10px);
  margin: auto;
  border-bottom: solid 1px #e6e6e6;
  .topInput {
    width: 200px;
  }
}
.diagForm {
  .el-form-item {
    width: 450px;
  }
  .el-input {
    width: 350px;
  }
}
</style>